$(function () {
    const form = layui.form
    // 1. 渲染富文本
    initEditor()

    // 裁剪图片
    const $image = $('#cover')
    // 准备裁剪选项
    const options = {
        aspectRatio: 1,
        preview: '.preview-cover'
    }
    // 创建裁剪
    $image.cropper(options)

    renderCate()

    // 查询类别列表 渲染到选择框中
    function renderCate() {
        $.get('/my/article/cates').then(res => {
            const html_str = template('tpl-cate', res)
            $('select[name=cate_id]').html(html_str)
            // 因为select由layui渲染的 所以还需要layui渲染一次
            form.render()
        })
    }

    // 点击选择封面 进行选择文件
    $('#select-file').on('click', function() {
        // 触发文件选择框
        $('#file').trigger('click')
    })

    // 监听文件选择
    $('#file').on('change', function() {
        // 1. 获取选中的文件
        const file = this.files[0]
        // 2. 转为URL地址类型
        const img_url = window.URL.createObjectURL(file)
        // 3. 设置到图片中
        $image
            .cropper('destroy')    
            .attr('src', img_url)
            .cropper(options)
    })
    let state = '已发布'

    // 监听保存为草稿
    $('#save').on('click', function() {
        state = '草稿'
    })

    // 监听表单提交 
    $('#pub-form').on('submit', function() {
        // 1. 获取表单收集的数据 formData对象
        // formData 就是 js中表单
        const formData = new FormData(this) // 将form表单转为formData对象
        // 设置状态
        formData.append('state', state)
        // 设置封面 获取裁剪图
        $image.cropper('getCroppedCanvas', {
            width: 200,
            height: 200
        }).toBlob(function(blob) {
            formData.append('cover_img', blob)
            // 发起请求
            $.ajax({
                method: 'post',
                url: '/my/article/add',
                data: formData,
                contentType: false,
                processData: false,
            }).then(res => {
                // 提示
                layui.layer.msg("发布成功！！")
                location.href = '/article/article-list.html'
            })
        })
        return false
    })
})